<template>
	<view class="topic">
		<!-- 模糊图片 -->
		<view class="topic__fliter">
			<image :src="topicInfo.titlepic" mode="aspectFill" lazy-load/>
		</view>
		<!-- 话题信息 -->
		<view class="topic__user">
			<view class="topic__user--userInfo">
				<image :src="topicInfo.titlepic" mode="widthFix"/>
				<text class="topic__user--userInfo--title">#{{topicInfo.title}}#</text>
			</view>
			<view class="topic__user--text">
				<text>动态 {{topicInfo.totalnum}}</text>
				<text>今日 {{topicInfo.todaynum}}</text>
			</view>
			<view class="topic__user--content">{{topicInfo.desc}}</view>
		</view>
		
	</view>
	
</template>

<script setup>
	const props =defineProps({
		topicInfo:{
			type:Object,
			required:true,
		}
	})
</script>

<style lang="scss" scoped>
	@mixin flex {
		display: flex;
		
	}
	.topic {
		&__fliter{
			width: 100%;
			image {
				width: 100%;
				height: 300upx;
				filter: blur(10px);
				border-bottom: 1upx solid black;
			}
		}
		
		&__user{
			position: relative;
			z-index: 99;
			@include flex;
			flex-direction: column;
			background-color: #FFFFFF;
			padding: 0 20upx;
			&--userInfo {
				@include flex;
				position: relative;
				>image {
					width: 180upx;
					height: 180upx;
					border-radius: 16upx;
					position: relative;
					top: 0;
					left: 0;
					transform: translateY(-50%);
					vertical-align: middle;
				}
				&--title{
					font-weight: 600;
					font-size: 40upx;
					color: black;
					margin-left: 20upx;
				}
				
			}
			&--text {
				margin-top: -64upx;
				color: #ccc;
				>text {
					margin-right: 20upx;
				}
			}
			&--content {
				color: #b4b4b4;
				font-size: 30upx;
				line-height: 50upx;
				margin: 20upx 0;
			}
			
		}
		
	}
</style>
